<template>
  <div class="root" @mousemove="updatePosition" @mouseleave="hide">
    <div class="tooltip" :style="{ left: x + 'px', top: y + 'px' }" v-if="showTooltip">
      {{ tooltipText }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tool-tip',
  data () {
    return {
      x: 0,
      y: 0,
      showTooltip: false,
      tooltipText: ''
    }
  },
  methods: {
    updatePosition (event) {
      this.x = event.clientX
      this.y = event.clientY
    },
    show (text) {
      this.tooltipText = text
      this.showTooltip = true
    },
    hide () {
      this.showTooltip = false
    }
  }
}
</script>

<style scoped>
.root {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
}
.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}
</style>
